<template>
  <div class="container">
    <div class="left">
      <div class="avatar-show" v-if="avatar">
        <img :src="avatarPic" alt="我的头像" width="100" height="100">
        <div class="avatar">我的头像</div>
      </div>
      <uploadPic v-else></uploadPic>
      <el-button @click="changeAva" class="btn">{{btnName}}</el-button>
    </div>
    <div class="right" v-show="msg.group_id">
      <div class="common group-id">
        <span class="title">我的部门编号：</span>
        <span class="id">{{msg.group_id}}</span>
      </div>
      <div class="common group-name">
        <span class="title">我的职位：</span>
        <span class="id">{{msg.group_name}}</span>
      </div>
      <div class="common id">
        <span class="title">我的工号：</span>
        <span class="id">{{msg.huser_id}}</span>
      </div>
      <div class="common name">
        <span class="title">我的姓名：</span>
        <span class="id">{{msg.huser_name}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Bus from "@/api/common/bus";
import UploadPic from "@/components/uploadPic/uploadPic";
import axios from "axios";
import uploadPicVue from '../uploadPic/uploadPic.vue';
export default {
  data() {
    return {
      avatar: true,
      btnName: "修改头像",
      msg: {}
    };
  },
  computed: {
    ...mapGetters(["person"]),
    avatarPic() {
      let msg = localStorage.getItem("loginMsg")
      let upLP = sessionStorage.getItem('avatar')
      if (!upLP) {
        console.log(`http://apitest.zhongxiangtianxia.cn/${JSON.parse(msg).huser_head}`)
        return `http://apitest.zhongxiangtianxia.cn/${JSON.parse(msg).huser_head}`
      } else {
        return `http://apitest.zhongxiangtianxia.cn/${upLP}`
      }
    }
  },
  methods: {
    changeAva() {
      this.avatar = !this.avatar;
      if (this.avatar) {
        this.btnName = "修改头像";
      } else {
        this.btnName = "取消";
      }
    }
  },
  components: {
    UploadPic
  }
};
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
.container
  display: flex;
  width: 100%;
  padding: 50px;

  .left
    flex: 400px 0;
    display: inline-block;

    img
      border-radius: 20px;
      box-shadow: 2px 2px 2px;

    .avatar
      margin: 10px 0;

    .btn
      margin-top: 10px;

  .right
    flex: 1;
    display: inline-block;
    text-align: left;

    .common
      padding-left: 40px;
      margin-bottom: 40px;
      font-weight: 700;
</style>
